<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>转换</title>
		<style type="text/css">
			.box1{
				margin: 200px auto;
				width: 300px;
				height: 300px;
				background-color: deeppink;
				transition: all 2s linear;
				/* 方位词:水平方向(left,right,center),垂直方向(top,bottom,center) */
				transform-origin: 50%;
			}
			.box1:hover{
				/* 过渡transform:
				    1.位移translate(x轴，y轴)，translatex(x轴)，translatey(y轴)；
					  transform: translate(100px,200px);
					2.缩放scale(倍数)，scalex（宽度缩放），scaley(高度缩放)
					  transform: scale(-2);
					3.旋转rotate(度数)，单位deg,正数顺时针，负数逆时针
					4.倾斜skew(度数)，单位deg
					  transform: skew(-45deg);
					*/
				transform: scale(2,0.5)
			}
		</style>
	</head>
	<body>
		<div class="box1"></div>
	</body>
</html>
